<template>
    <div class="view_administrator">
        <card title="管理员列表">
            <template #actions>
                <el-input
                    class="w-48"
                    v-model="queryString"
                    placeholder="按管理员账号查询"
                    prefix-icon="el-icon-search"
                    clearable
                />
                <el-button type="primary" @click="add">添加管理员</el-button>
            </template>
            <template #default>
                <el-table :data="tableData" @selection-change="handleSelect">
                    <el-table-column type="selection" />
                    <el-table-column prop="loginName" label="管理员账号" />
                    <el-table-column prop="name" label="姓名" />
                    <el-table-column prop="depts" label="部门" />
                    <el-table-column prop="phone" label="手机号" />
                    <el-table-column prop="enabled" label="状态">
                        <template v-slot="{ row: { enabled } }">
                            <el-tag effect="dark" :type="enabled ? 'success' : 'info'">
                                {{ enabled ? '正常' : '禁用' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" />
                    <el-table-column label="操作">
                        <template v-slot="{ row }">
                            <el-button type="text" @click="edit(row)">编辑</el-button>
                            <el-button type="text" @click="_delete(row.managerId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <template #bottom-left>
                <el-button type="danger" @click="_delete" :disabled="isBatchButtonDisabled">删除所选</el-button>
            </template>
            <template #bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>

        <!-- 添加/编辑管理员 -->
        <el-dialog :visible.sync="visible" :title="dialogTitle" @opened="getRoleList" @closed="handleClosed">
            <template #default>
                <el-form label-position="top">
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <el-form-item label="管理员账号">
                                <el-input v-model="formData.loginName" />
                            </el-form-item>
                            <el-form-item label="手机号">
                                <el-input v-model="formData.phone" />
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input v-model="formData.loginPassword" type="password" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="姓名">
                                <el-input v-model="formData.name" />
                            </el-form-item>
                            <el-form-item label="部门">
                                <el-input v-model="formData.depts" />
                            </el-form-item>
                            <el-form-item label="确认密码">
                                <el-input v-model="formData.cfPassword" type="password" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="角色">
                        <tree-select v-model="formData.roleIds" :options="roleList" multiple />
                    </el-form-item>
                    <el-form-item label="备选项">
                        <el-checkbox v-model="formData.enabled">是否启用</el-checkbox>
                    </el-form-item>
                </el-form>
            </template>

            <template #footer>
                <el-button type="primary" @click="save">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { encrypt } from '../../functions';
import { getDeletionOptions, getQueryOptions } from '../../mixins';
import treeSelect from '@riophae/vue-treeselect';

const APIURL = {
    get: '/yxl/manager/findPageManager',
    set: '/yxl/manager/updateManager',
    save: '/yxl/manager/saveManager',
    delete: '/yxl/manager/deleteManager',
};

const primaryKey = 'managerId';
const defaultFormData = {
    loginName: '',
    depts: '',
    phone: '',
    name: '',
    loginPassword: '',
    cfPassword: '',
    roleIds: [],
    enabled: true,
};

const defaultFormDataCopied = Object.assign({}, defaultFormData);

export default {
    data() {
        return {
            tableData: [],
            roleList: [],

            editing: false,

            visible: false,

            // 表单
            formData: defaultFormData,
        };
    },

    components: { treeSelect },

    computed: {
        dialogTitle() {
            return this.editing ? '编辑管理员' : '添加管理员';
        },
    },

    mixins: [
        getQueryOptions({
            apiurl: APIURL.get,
            paginable: true,
            params: {
                queryString: 'loginName',
            },
        }),

        getDeletionOptions({
            apiurl: APIURL.delete,
            primaryKey,
            params: primaryKey + 's',
        }),

        // getModificationOptions({
        //     primaryKey,
        //     formDataKeyMapping: {
        //         roleId: 'roleIds',
        //     },
        //     fnBeforeOpening: 'getRoleList',
        // }),
        // getAdditionOptions({
        //     additionApiurl: APIURL.save,
        //     modificationApiurl: APIURL.set,
        //     fnBeforeOpening: 'getRoleList',
        //     fnBeforeSaving(data, isModification) {
        //         if (isModification && !data.loginPassword && !data.cfPassword) {
        //             // 删除密码参数
        //             delete data.loginPassword;
        //             delete data.cfPassword;
        //         } else if (data.loginPassword && data.cfPassword) {
        //             data.loginPassword = encrypt(data.loginPassword);
        //             data.cfPassword = encrypt(data.cfPassword);
        //         } else {
        //             this.$message.error('你必须输入密码和确认密码');
        //             return;
        //         }

        //         data.roleIds = data.roleIds.toString();

        //         return true;
        //     },
        // }),
    ],

    methods: {
        getRoleList() {
            if (this.roleList.length) return;

            this.$get('/yxl/role/findPageRole').then(({ records }) => {
                this.roleList = Object.freeze(records.map(item => ({ id: item.roleId, label: item.roleName })));
                // this.visible = true;
            });
        },

        // 添加
        add() {
            this.editing = false;
            this.visible = true;
        },

        // 编辑
        edit(row) {
            this.formData.managerId = row.managerId;
            this.formData.loginName = row.loginName;
            this.formData.name = row.name;
            this.formData.phone = row.phone;
            this.formData.depts = row.depts;
            this.formData.enabled = row.enabled;
            this.formData.roleIds = row.roleId.slice();

            this.editing = true;
            this.visible = true;
        },

        // 保存
        save() {
            let data = Object.assign({}, this.formData);
            if (this.editing && !data.loginPassword && !data.cfPassword) {
                // 删除密码参数
                delete data.loginPassword;
                delete data.cfPassword;
            } else if (data.loginPassword && data.cfPassword) {
                data.loginPassword = encrypt(data.loginPassword);
                data.cfPassword = encrypt(data.cfPassword);
            } else {
                this.$message.error('必须输入密码和确认密码');
                return;
            }

            data.roleIds = data.roleIds.toString();

            this.$put(`/yxl/manager/${this.editing ? 'update' : 'save'}Manager`, data).then(res => {
                this.visible = false;
                this.query();
            });
        },

        handleClosed() {
            delete this.formData.managerId;
            Object.assign(this.formData, defaultFormDataCopied);
        },
    },
};
</script>